<template>
    <div class="mu-select-menu" ref="SMenu">
        <slot></slot>
        <div class="mu-select-menu-select" v-show="showSelect" :class="selectClass">
            <div class="mu-select-menu-option" v-for="(item, index) in options" :key="item.label" @click="handle(index, item, options)">{{item.label}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'mu-s-menu',
        mounted: function () {
            this.$refs.SMenu['on' + this.event] = this.show
        },
        data: function () {
            return {
                showSelect: false
            }
        },
        methods: {
            handle: function (...arg) {
                this.$emit('on-option-click', arg[0], arg[1], arg[2])
            },
            hide: function () {
                this.showSelect = false
                setTimeout(() => {
                    window.removeEventListener(this.event, this.hide, false)
                }, 200)
            },
            show: function () {
                this.showSelect = true
                setTimeout(() => {
                    window.addEventListener(this.event, this.hide, false)
                }, 200)
            }
        },
        props: {
            options: {
                type: Array,
                default: _ => []
            },
            event: {
                type: String,
                default: 'click'
            },
            'select-class': [String, Object]
        }
    }

</script>

<style>


</style>
